<template>
  <div class="test-result">
    <div class="r-body">
      <div class="r-head"></div>
      <div class="r-text-div">
        <div class="text-body">
          <div
            class="r-text"
            :class="{'fail':!result.levels.length}"
          >
            <img
              v-if="result.levels.length"
              src="../assets/img/success-gold.png"
              alt=""
            >
            <img
              v-if="!result.levels.length"
              src="../assets/img/fail-gold.png"
              alt=""
            >
            <span><em>{{result.score}}</em>分</span>
          </div>
          <div class="r-word">
            <p class="r-word-text">
              <em v-if="result.levels.length">恭喜您！</em>
              <em
                v-if="!result.levels.length"
                class="fail-text"
              >很遗憾！</em>
              {{result.studentName}}
            </p>
            <p v-if="result.levels.length">已通过学前评估！</p>
            <p v-if="!result.levels.length">您没能通过学前评估，继续加油</p>
          </div>
          <router-link
            v-if="false"
            tag="div"
            to="/assessment"
            class="retest"
          >再测一次</router-link>
        </div>
      </div>
    </div>
    <div class="test-btn">
      <div
        @click="urlCallback"
        class="home"
      >课程首页</div>
      <router-link
        tag="div"
        to="/assessment"
        class="my-test"
      >学前评估</router-link>
    </div>
  </div>
</template>

<script>
import api from 'util/xhr'
import conf from 'conf/index'
export default {
  name: 'test-result',
  components: {},
  data: function() {
    return {
      result: { levels: [] },
      onlineTestResultId: this.$route.query.onlineTestResultId
    }
  },
  created() {
    this.getResult()
  },
  mounted() {},
  methods: {
    urlCallback() {
     window.location.href = `${conf.netSignUp}/`
    },
    getResult() {
      api
        .post('/api/m/onlineTestResult', {
          onlineTestResultId: this.onlineTestResultId
        })
        .then(
          data => {
            if (data.levels && data.levels.length > 0) {
              data.levels = Array.from(new Set(data.levels))
              let classType = [
                { id: '1', value: '不区分' },
                { id: '2', value: '核心素养班' },
                { id: '3', value: '新课标S班' },
                { id: '4', value: '新课标A班' },
                { id: '5', value: '新课标B班' },
                { id: '6', value: '启航班' },
                { id: '7', value: '研习班' }
              ]
              let cType = []
              data.levels.map(item => {
                classType.map(cItem => {
                  if (cItem.id === item) {
                    cType.push(cItem.value)
                  }
                })
              })
              data.levels = cType
            }
            this.result = data
          },
          desc => {
            this.$alert({ content: desc })
          }
        )
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.test-result {
  background: url('../assets/img/bg-start.png');
  background-size: cover;
  min-height: 100%;
}

.r-body {
  padding-top: 80px;
}

.r-head {
  height: 20px;
  background-image: linear-gradient(0deg, #b02712 0%, #f52e13 100%);
  border-radius: 10px;
  margin: 0 10px;
}

.r-text-div {
  margin: 0 40px;
  background: #fec338;
  padding: 0 20px 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.r-text {
  position: relative;
  font-weight: bold;
  background: url('../assets/img/success-bg.png');
  background-size: contain;
  height: 355px;
  width: 100%;
  margin-bottom: 80px;
}
.r-text.fail {
  background: white;
}
.r-text.fail em {
  color: #ff7800;
}
.r-text img {
  /*width: 100%;
    height: auto;*/
  position: absolute;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  height: auto;
}
.r-text span {
  font-size: 24px;
  position: absolute;
  top: 165px;
  left: 50%;
  transform: translateX(-50%);
}
.r-text em {
  font-size: 72px;
  color: #dd2b01;
  vertical-align: baseline;
}
.r-word {
  padding-bottom: 120px;
  font-size: 32px;
  text-align: center;
  line-height: 80px;
}
.r-word-text {
  /*margin-top: 8rem;*/
}
.fail-text {
  color: #0090ff !important;
}
.r-word em {
  color: #ff7800;
  font-size: 48px;
  font-weight: bold;
}
.retest {
  font-weight: bold;
  color: #0090ff;
  text-decoration: underline;
  text-align: center;
  padding: 120px 0 50px;
  font-size: 28px;
}
.text-body {
  background: white;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.test-btn {
  margin-top: 40px;
  display: flex;
  position: relative;
  padding-bottom: 20px;
}

.test-btn div {
  width: 274px;
  height: 94px;
  border: 4px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  font-size: 32px;
  color: white;
  font-weight: bold;
}

.home {
  margin-left: 60px;
  background-image: linear-gradient(0deg, #0e9bf5 0%, #50c4e2 100%);
}

.my-test {
  position: absolute;
  right: 60px;
  background-image: linear-gradient(0deg, #ff9f13 0%, #ffc60b 100%);
}
</style>
